<template>
  <a-modal
    :visible="modelValue"
    top="10vh"
    width="40%"
    :align-center="false"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <template #title> 上传 </template>
    <a-upload
      ref="uploadRef"
      draggable
      :action="url"
      :auto-upload="false"
      @change="onChange"
    >
      <template #upload-button>
        <a-space>
          <a-button>选择文件</a-button>
          <a-button type="primary" @click="submit">开始上传</a-button>
        </a-space>
      </template>
    </a-upload>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, toRefs } from 'vue';

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    url: {
      type: String,
      default: '',
    },
  });
  const { url } = toRefs(props);
  const emits = defineEmits(['update:modelValue']);
  const cancel = () => {
    emits('update:modelValue', false);
  };

  const uploadRef = ref();
  const submit = (e) => {
    e.stopPropagation();
    uploadRef.value.submit();
  };
  const onChange = () => {};
  const handleCancel = () => {
    cancel();
  };
  const handleSubmit = () => {
    cancel();
  };
</script>
